<template>
    <!-- 顶部搜索栏 -->
    <van-search v-model="keyword" show-action placeholder="请输入搜索关键词">
        <template #left>
            <div @click="$router.go(-1)"><van-icon name="arrow-left" size="16" /></div>
        </template>
        <template #action>
            <div @click="search">搜索</div>
        </template>
    </van-search>
    <div class="page" v-if="flag">
        <!-- 搜索历史 -->
        <van-cell-group>
            <van-cell class="vanCell" title="搜索历史" value="隐藏" />
        </van-cell-group>
        <van-row gutter="6">
            <van-col class="vanCol" v-for="item in searchList" :key="item.wordid" @click="goSearchDetail(item.keyword)">
                {{ item.keyword }}
            </van-col>
        </van-row>

        <!-- 热门搜索 -->
        <van-cell-group>
            <van-cell class="vanCell" title="热门搜索" value="隐藏" />
        </van-cell-group>
        <van-row gutter="6">
            <van-col class="vanCol" v-for="item in searchList" :key="item.wordid" @click="goSearchDetail(item.keyword)">
                {{ item.keyword }}
            </van-col>
        </van-row>
    </div>
    <div v-else>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
            <!-- 加载搜索栏数据 -->
            <van-list v-if="keyword.length !== 0">
                <van-cell class="cell" v-for="item in clickSearchlis1" :key="item.proid"
                    @click="$router.push('/details/' + item.proid)">
                    <img :src="item.img1" />
                    <h6>{{ item.proname }}</h6>
                    <p>￥{{ item.originprice }}</p>
                </van-cell>
            </van-list>

            <!-- 加载全部数据 -->
            <van-list v-else v-model="loading" :finished="finished" finished-text="没有更多了"
                @load="onLoad">
                <van-cell class="cell" v-for="item in clickSearchlis2" :key="item.proid"
                    @click="$router.push('/details/' + item.proid)">
                    <img :src="item.img1" alt="">
                    <h6>{{ item.proname }}</h6>
                    <p>￥{{ item.originprice }}</p>
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { searchList, allList, hotword } from '../server/search.js'
export default {
    data() {
        return {
            loading: false,
            finished: false,
            refreshing: false,
            clickSearchlis2: [],
            flag: true,
            searchList: [],
            clickSearchlis1: [],
            currentPage: 1,
            count: 1,
            keyword: "",
        }
    },
    created() {
        //请求搜索栏的信息
        hotword().then((res) => {
            if (res.code === "200") {
                this.searchList = res.data
                console.log(this.searchList);
            }
        })
    },

    methods: {
        goSearchDetail(keyword) {
            this.keyword = keyword
            this.search()
        },

        search() {
            this.flag = false
            searchList({ count: this.count, keyword: this.keyword }).then((res) => {
                if (res.code === "200") {
                    this.clickSearchlis1 = res.data
                }
            })
        },


        onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
        //异步更新数据   直接点击搜索按钮的时候
        onLoad() {
            setTimeout(() => {
                if (this.refreshing) {
                    this.clickSearchlis2 = [];
                    this.refreshing = false;
                }

                allList({ count: this.currentPage, keyword: "" }).then((res) => {
                    if (res.code === "200") {
                        this.clickSearchlis2 = this.clickSearchlis2.concat(res.data)
                        this.currentPage++
                    }
                })
                this.loading = false;
                if (this.clickSearchlis2.length >= 200) {
                    this.finished = true;
                }
            }, 1000);
        }
    }
}
</script>
<style scoped>
/* 顶部搜索栏 */
.btnAdd,
.btnLogin {
    font-size: 16px;
    color: #fff;
}

.van-search {
    background-color: #fff !important;
}

.btnAdd {
    padding: 0px 9.04533px 0px 0px;
    margin-left: 12px;
}

.btnLogin {
    padding: 0px 8px;
    margin-right: 5px;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
}

/* 搜索历史 热门搜索 */
.vanCell {
    height: 50px;
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 14px;
    color: #323233;
    background-color: #fff;
}

.vanCol {
    font-size: 1.6vw;
    color: #ff6347;
    height: 20px;
    background-color: #efefef;
    margin: 6.72px;
    padding: 2.016px 3.36px;
}

/* 商品列表页 */
.van-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.van-list .cell {
    width: 49%;
    margin-bottom: 15px;
}

.van-list img {
    width: 100%;
}

.van-list h6 {
    font-size: 12px;
    color: #2c3e50;
    margin-top: 5px;
    text-align: left;
}

.van-list p {
    font-size: 16px;
    color: #ee0a24;
    margin-top: -15px;
    font-weight: 800;
    text-align: left;
}
</style>